<template>
	<view class="flex-col page">
		<text class="self-center font_1">分享您的反馈</text>
		<view class="flex-row justify-between group">

			<view v-for="(item,index) in image_s_list" :key="index">
				<image v-if="attitude!=null && attitude==index" class="image" @click="updateImg(index)"
					:src="image_s_list[index]" />
				<image v-if="attitude!=index" class="image" @click="updateImg(index)" :src="image_list[index]" />
			</view>



		</view>
		<text class="self-center font_1 text">匿名评价</text>
		<view class="flex-col justify-start image-wrapper">
			<textarea v-model="context" class="image_3" />
		</view>
		<uni-section title="只选择图片" type="line">
			<view class="example-body">
				<uni-file-picker
					v-model="imageValue" 
					fileMediatype="image" 
					mode="grid" 
					:limit="9"
					@select="select2" 
					@progress="progress2" 
					@success="success2" 
					@fail="fail2" 
					style="margin-bottom: 20rpx;"
				/>
			</view>
		</uni-section>


		<view style="margin-top: 42rpx;">
			<view class="flex-col space-y-10">
				<view class="flex-col justify-start items-center text-wrapper" @click="submit()">
					<text class="text_3">提交</text></view>
				<text class="self-center font_2 text_4" @click="cancel()">取消</text>
			</view>
		</view>
	</view>
</template>



<script>
	export default {

		data() {
			return {
				attitude: null,
				context: "",
				selectedImgs:[],
				imageValue:[],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},



				image_s_list: ['/static/sad-s.png', '/static/gangga-s.png', '/static/smile-s.png'],
				image_list: ['/static/sad.png', '/static/gangga.png', '/static/smile.png'],
				current: 1
			}
		},
		methods: {
			updateImg(index) {
				if (this.attitude != index) {
					this.attitude = index
				} else {
					this.attitude = null
				}
			},
			select2(e){
				const temp =e.tempFilePaths;
				
				for(var i = 0;i<temp.length;i++){
					this.loadImg(temp[i],i)
				}
				
			
			},
			
			cancel(){
				uni.navigateBack();
				
			},
			loadImg(path,index){
				uni.uploadFile({
					url: 'http://localhost:7777/api/strategy/upload',
					filePath: path,
					name:'file',
					header:{
						token: uni.getStorageSync('token')!=null? uni.getStorageSync('token'):' '
					},
					formData: {
						type:'feedback'
					},
					success: (res) => {
						const data = JSON.parse(res.data)
						console.log("返回的结果：",data)
						if(data.code == '1'){
							
							uni.showToast({
								title: '上传图片成功'
							});
							var x ={}
							x.url = data.data
							x.name = "imgvalue"+index
							x.extname=""
							this.imageValue.push(x)
						}
					},
					fail(res){
						console.log(res)
						uni.showToast({
							title: '提交失败'
						});
					}
				})
			},
			submit() {
			
				if(this.attitude==null || this.context==null || this.context==''){
					uni.showToast({
						icon:'error',
						title:'请填写完整',
					})
					return
				}else{
					
					console.log(this.imageValue)
					for(var i=0;i<this.imageValue.length;i++){
						this.selectedImgs.push(this.imageValue[i].url)
					}
					console.log(this.selectedImgs)
					var da = {}
					da.imgs = this.selectedImgs
					da.attitude = this.attitude
					da.context = this.context
					
					this.request({
						url:"/user-advise/add",
						method:'POST',
						data:da
					}).then(res=>{
						if(res.code==='1'){
							console.log(111)
							uni.showToast({
								icon:'success',
								title:'提交成功,请耐心回信',
								
							})
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/service/service'
								})
							},1500)
							
						}else{
							uni.showToast({
								icon:'error',
								title:'提交失败',
							})
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/service/service'
								})
							},1000)
						}
					}).catch(()=>{
						uni.showToast({
							icon:'error',
							title:'服务异常',
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/service/service'
							})
						},1000)
					})
				}
				
			},


		}
	}
</script>

<style lang="scss" scoped>
	.example-body {
		padding: 10px;
		padding-top: 0;
		background-color: #F1F1F4;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #F1F1F4;
	}

	.text {
		font-size: 14px;
		color: #333;
	}

	.all {
		padding: 20rpx;

		.image {

			box-sizing: border-box;
			border: 2rpx dashed #666666;
			height: 440rpx;
			width: 200rpx;

			.imageText {
				text-align: center;
				line-height: 440rpx;

			}

			.imgSrc {
				height: 440rpx;
				text-align: center;

				image {
					height: 100%;
				}
			}
		}
	}

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}


	.page {
		padding: 100rpx 0 72rpx 10rpx;
		background-color: #f1f1f4;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.font_1 {
		font-size: 40rpx;
		font-family: HarmonyOSSansSC;
		line-height: 37rpx;
		color: #535b72;
	}

	.group {
		margin-top: 72rpx;
		padding: 0 128rpx;
	}

	.image {
		width: 116rpx;
		height: 116rpx;
	}

	.image_2 {
		margin-right: 4rpx;
	}

	.text {
		margin-top: 72rpx;
	}

	.image-wrapper {
		margin-top: 60rpx;
		padding-bottom: 32rpx;
		background-color: #00000000;
	}

	.image_3 {
		margin-left: 48rpx;
		margin-right: 38rpx;
		width: 654rpx;
		height: 248rpx;
		background-color: white;
	}

	.group_2 {
		margin-top: 396rpx;
		padding: 0 38rpx;
	}

	.space-y-18>view:not(:first-child),
	.space-y-18>text:not(:first-child),
	.space-y-18>image:not(:first-child) {
		margin-top: 36rpx;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
	}

	.text_2 {
		color: #37386e;
	}

	.space-y-10>view:not(:first-child),
	.space-y-10>text:not(:first-child),
	.space-y-10>image:not(:first-child) {
		margin-top: 20rpx;
	}

	.text-wrapper {
		margin-right: 10rpx;
		padding: 32rpx 0;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16996876441081455684.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_3 {
		color: #ffffff;
		font-size: 36rpx;
		font-family: HarmonyOSSansSC;
		line-height: 33rpx;
	}

	.text_4 {
		color: #02477f;
	}
</style>